<template>
    <a-collapse v-model:activeKey="activeKey" class="collapse" accordion>
        <a-collapse-panel key="1" header="表单基本配置">
            <div class="CollapseView">{{ text }}</div>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="UI元素">
            <UIElement />
        </a-collapse-panel>
        <a-collapse-panel key="3" header="参数配置">
            <p>{{ text }}</p>
        </a-collapse-panel>
        <a-collapse-panel key="4" header="表单联动">
            <p>{{ text }}</p>
        </a-collapse-panel>
    </a-collapse>
</template>
<script setup>
import { ref, watch } from "vue";
import UIElement from "./UIElement.vue";

const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
const activeKey = ref(["1"]);
</script>

<style scoped>
.collapse {
    height: 100%;
}

:deep(.ant-collapse-content-box) {
    height: calc(100vh - 241px);
    overflow-x: hidden;
    overflow-y: auto;
}
</style>
